<template>
    <view class="big-box">
        <!-- <view class="top-Text">
            <view>欢迎登录</view>
        </view> -->
        <view>

            <!-- <view class="weChat">
                <image src='../../static/login/weChat.png'></image>
            </view> -->
            <view class="logink-box">
                <!-- <input type="nickname" class="userName" placeholder="请输入昵称" v-model="nameUser" @blur="bindblur" /> -->
                <!-- 授权手机号登录 -->
                <!-- <view>
                <view v-if="isLogin" class="form-btn" @tap="toPhoneLogin">手机号快捷登录</view>
                <button v-else class="form-btn" @getphonenumber="getPhoneNum" open-type="getPhoneNumber">
                    <text>手机号快捷登录</text>
                </button>
                <text style="display: flex;align-items: center;justify-content: center;color: #70a2a4;padding-top: 20rpx;"
                    @click="goRouterBack">取消登录</text>
            </view> -->

                <view class="login-title">
                    <u-icon name="arrow-left" :size='24' style="margin-right:20rpx" @click="goRouterBack"></u-icon>
                    重置密码</view>
                <!-- 普通字段登录 -->
                <u--form labelPosition="left" :model="form" ref="form1">
                    <!-- <u-form-item label="用户名" prop="userName" borderBottom labelWidth="100">
                        <u--input v-model="form.userName" border="none" placeholder="请输入用户名"></u--input>
                    </u-form-item>
                    <u-form-item label="身份证" prop="idCard" borderBottom labelWidth="100">
                        <u--input v-model="form.idCard" border="none" placeholder="请输入身份证"></u--input>
                    </u-form-item> -->
                    <u-form-item label="手机号" prop="phone" borderBottom labelWidth="100">
                        <u--input v-model="form.phone" border="none" placeholder="请输入手机号"></u--input>
                    </u-form-item>
                    <u-form-item label="密码" prop="password" borderBottom labelWidth="100">
                        <u--input v-model="form.password" type='password' border="none" placeholder="请输入密码"></u--input>
                    </u-form-item>
                    <u-form-item label="确认密码" prop="password1" borderBottom labelWidth="100">
                        <u--input v-model="form.password1" type='password' border="none" placeholder="请再次输入密码"></u--input>
                    </u-form-item>
                    <!-- <u-form-item label="验证码" prop="captcha" borderBottom labelWidth="100">
                        <view style="    display: flex;">
                            <u--input v-model="form.captcha" border="none" placeholder="请填写验证码"></u--input>
                            <u--image :showLoading="true" mode="scaleToFill" :src="captchaSrc" width="200rpx" height="80rpx"
                                @click="handleGetCode"></u--image>
                        </view>
                    </u-form-item>
                    <u-form-item label="手机验证码" prop="identityCode" borderBottom ref="item1" labelWidth="100">
                        <u--input v-model="form.identityCode" :maxlength="6" border="none" placeholder="请输入手机验证码"></u--input>
                        <div class="codeText" slot="right" @tap="getIdentityCode" type="primary" size="mini" :disabled="isVerify">
                            {{isVerify?time+'秒后再次获取':'发送验证码'}}</div>
                    </u-form-item> -->
                </u--form>
                <view class="changeTipBox" @click="gotoPage('/pages/login/login')">
                    已经账号？点此登录>
                </view>
                <view class="buttons" @tap="toLogin">重置</view>
                <!-- <view class="login-protocol">
                <view class="checked-box">
                    <view @tap="isSelected = !isSelected" :class="isSelected ? 'selected' : ''"></view>
                </view>
                <view @click.stop="dealPopup">
                    同意《用户协议及隐私协议》
                </view>
            </view> -->
            </view>
            <view class="popup" v-if="show" @tap="show = false" style="background-color: rgba(0,0,0,.5);">
                <view class="rect" @tap.stop>
                    <view>
                        <p></p>
                        <p style="text-align:center;text-indent:0;margin-left:0;">
                            <span style="font-weight:bold;color:#333333;font-size:20pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                用户服务协议
                            </span>
                        </p>
                        <p style="text-align:left;text-indent:0;margin-left:0;">
                            <span></span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;一、服务协议的确定
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;二、内容所有权
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;三、用户信息的提供
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;四、用户资料隐私保护
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;五、用户资料安全
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;六、用户享有的权利和服务
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;七、用户管理
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;八、免责声明
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;九、服务变更、中断或终止
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;十、违约赔偿
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;十一、修改协议
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;十二、法律管辖
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;十三、通知和送达
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;十四、其他规定
                            </span>
                            <br />
                            <span style="color:#333333;background-color:#FFFFFF;font-size:12pt;font-family:微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑;">
                                &emsp;&emsp;本协议适用中华人民共和国法律，因任何一方出现违反法律的行为而造成协议条款的不能执行，都应由责任方自行负责并补偿由此而给对方造成的损失。
                            </span>
                            <br />
                            <span></span>
                            <br />
                        </p>
                    </view>
                    <view class="close" @tap="
                        show = false
                        isSelected = true
                    ">
                        <text>我已知晓</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<!-- 用户名，身份证，手机号，密码，校验码，短信验证 -->
<script>
import Validate from '../../utils/tools/validate.js'
export default {
    data() {

        const checkPassword = (rule, value, callback) => {
            if (value) {
                let strongPasswordRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,16}$/
                if (value.length < 8 || value.length > 16) {
                    callback(new Error('请输入8-16位的密码'))
                }
                else if (!strongPasswordRegex.test(value)) {
                    callback('密码强度需要8-16个字符，需要使用数字、大小字母及特殊符号，增强密码安全性。');
                } 
                else {
                    if (this.model1.password != this.model1.confirmPassword && this.model1.confirmPassword) {
                        callback(new Error('密码与确认密码不一致'))
                    } else {
                        callback()
                    }
                }
            }
        }
        const checkConfirmPassword = (rule, value, callback) => {
            if (value) {
                let strongPasswordRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,16}$/
                if (value.length < 8 || value.length > 16) {
                    callback(new Error('请输入8-16位的密码'))
                }
                else if (!strongPasswordRegex.test(value)) {
                    callback('密码强度需要8-16个字符，需要使用数字、大小字母及特殊符号，增强密码安全性。');
                } 
                else {
                    if (this.model1.password != this.model1.confirmPassword && this.model1.password) {
                        callback(new Error('密码与确认密码不一致'))
                    } else {
                        callback()
                    }
                }
            }
        }

        return {
            isSelected: false,
            show: false,
            loginName: '',
            password: '',
            rules: {
                userName: {
                    type: 'string',
                    required: true,
                    message: '请输入用户名',
                    trigger: ['blur']
                },
                idCard: [{
                    type: 'string',
                    required: true,
                    message: '请输入身份证',
                    trigger: ['blur']
                },
                {
                    validator: Validate.isIdNumber,
                }],
                phone: [{
                    type: 'string',
                    required: true,
                    message: '请输入手机号',
                    trigger: ['blur']
                },
                {
                    validator: Validate.isMobile
                }
                ],
                password: [{
                    type: 'string',
                    required: true,
                    message: '请输入密码',
                    trigger: ['blur']
                },
                {
                    validator: checkPassword,
                    trigger: ['blur']
                }],
                password1: [{
                    type: 'string',
                    required: true,
                    message: '请再次输入密码',
                    trigger: ['blur']
                },
                {
                    validator: checkConfirmPassword,
                    trigger: ['blur']
                }]
            },
            form: {
                password: '',
            },
            isVerify: false,
            time: 0,
            captchaSrc: '',

            WeChat: {
                session_key: '',
                openId: '',
                phone: '',
            },
            isLogin: false, //是否已授权登录
            loginResCode: '',
        }
    },
    onReady() {
        // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
        this.$refs.form1.setRules(this.rules)
        // this.getCaptchaM()
    },
    onLoad() {

        this.getCode()
    },
    methods: {

        bindblur(event) {
            this.nameUser = event.target.value;
            console.log(event.target);
            console.log(this.nameUser);
            // this.UploadWeChatName()
        },
        // 取消登录--返回上一页
        goRouterBack() {
            uni.navigateBack({
                delta: 1
            })
        },
        // 点击隐私协议
        dealPopup() {
            this.show = true
        },
        // 拨打电话
        makePhoneCall() {
            uni.makePhoneCall({
                phoneNumber: "400-133-7881"
            });
        },
        /***********************************************************
         * 
         * 普通字段登录
         * 
         **********************************************************/
        // 获取图片验证码
        getCaptchaM() {
            this.$asynApi.getCaptcha().then(val => {
                console.log(val);
                this.captchaSrc = val.data
            })
        },

        // 获取验证码
        async getIdentityCode() {
            let that = this
            if (this.isVerify) {
                return
            }
            this.$refs.form1.validateField('phone', (res) => {
                if (res.length == 0) {
                    that.$asynApi.getVerifyCode(
                        {
                            phone: this.form.phone,
                        }
                    ).then(val => {
                        console.log(val);
                        if (val.code == 200) {
                            that.isVerify = true;
                            that.time = 60;
                            that.timer = setInterval(() => {
                                that.time--;
                                if (that.time <= 0) {
                                    clearInterval(that.timer);
                                    that.time = 60;
                                    that.isVerify = false;
                                }
                            }, 1000);
                        }
                    })
                }
            })
        },


        // 登录
        toLogin() {// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
            let that = this
            this.$refs.form1.validate().then(res => {
                uni.$u.toast('校验通过')

                if (this.form.password != this.form.password1) {
                    uni.showToast({
                        title: `两次密码输入不一致，请重新输入`,
                        icon: 'none'
                    })
                    return
                }
                // if (!this.isSelected) {
                //     uni.showToast({
                //         title: '请阅读勾选用户隐私协议',
                //         icon: 'none',
                //     })
                //     return
                // }
                let _that = this
                uni.showLoading({
                    title: '重置中',
                })
                this.$asynApi
                    .reset(this.form)
                    .then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            uni.showToast({
                                icon: 'success',
                                title: '重置成功,请登录',
                            })
                            // this.getUserInfo(res.data)
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: '/pages/login/login',
                                })
                                uni.setStorageSync('token', res.data)
                            }, 1500)
                            // this.$store.commit('roleCodeListEdit', res.data.roleCodeList ? res.data.roleCodeList : [])

                        }
                    })
            }).catch(errors => {
                // uni.$u.toast('校验失败')
            })
        },

        // 登录成功后获取用户信息并存入缓存并跳转首页
        async getUserInfo(token) {
            this.$asynApi.sysUserDetail().then(res => {
                // console.log(res)
                let data = {
                    ...res.data, ...{
                        token: token
                    }
                }
                uni.setStorageSync('userInfos', data)
                uni.switchTab({
                    url: '/pages/tabbar/home',
                })
            })
        },


        /*************************************************
         * 
         * 授权手机号登录
         * 
         ************************************************/

        // 1.拿取code和后台换session_key
        getCode() {
            let _this = this
            uni.login({
                provider: 'weixin',
                success: function (loginRes) {
                    _this.loginResCode = loginRes.code
                    // console.log(loginRes, '1')
                    // if (loginRes) {
                    //     console.log(loginRes, '11')
                    //     _this.$asynApi.getOpenid(loginRes.code).then((infos) => {
                    //         console.log(infos, '2')
                    //         if (infos.code === 200) {
                    //             _this.WeChat.session_key = infos.data.session_key
                    //             _this.WeChat.openId = infos.data.openid
                    //         }
                    //         console.log(_this.WeChat, '3')
                    //     })
                    // }
                },
            })
        },

        // 1.1纯微信登录
        weChatLogin() {
            this.$asynApi.miniProgramLogin(this.loginResCode).then((infos) => {
                console.log(infos, '2')
            })
        },


        // 2.点击获取手机号
        getPhoneNum(e) {
            console.log(this.WeChat, '123123321')
            if (e.detail.errMsg == 'getPhoneNumber:ok') {
                this.$asynApi
                    .getPhoneNumber({
                        iv: e.detail.iv,
                        encryptedData: e.detail.encryptedData,
                        session_key: this.WeChat.session_key,
                    })
                    .then((infos) => {
                        console.log(infos, 'infos1121212')
                        this.isLogin = true
                        this.WeChat.phone = infos.data.phoneNumber
                        this.toPhoneLogin()
                        // if (infos.code == 200) {
                        // 	this.isLogin = true;
                        // 	this.WeChat.phone = infos.phoneNumber
                        // 	this.toPhoneLogin()
                        // }
                    })
            }
        },
        // 3.去登录
        toPhoneLogin() {
            if (!this.isSelected) {
                uni.showToast({
                    title: '请阅读勾选用户隐私协议',
                    icon: 'none',
                })
                return
            }
            this.$asynApi
                .login({
                    phone: this.WeChat.phone,
                    openId: this.WeChat.openId,
                })
                .then((res) => {
                    if (res.code === 200) {
                        this.getUserInfo(res.data.token)
                    }
                })
        },


        gotoPage(url) {
            uni.navigateTo({
                url: url,
            })
        },
    }
}
</script>

<style scoped lang="less">
.big-box {
    // padding-top: 384rpx;
    position: relative;
    background: #ffffff;
    background: url(/static/login/house.jpg) no-repeat top;

    // background: radial-gradient(
    //     400rpx 800rpx at 300rpx 300rpx,
    //     #4fa1ff,
    //     #bad5f3
    // );
    background-size: 100%;
    height: calc(100vh - 100rpx);
    // width: 100vw;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    .weChat {
        display: flex;
        justify-content: center;

        image {
            width: 300rpx;
            height: 270rpx;
            margin: 0 auto;
        }
    }
    // display: flex;
    // align-items: center;
    .top-Text {
        height: 370rpx;
        padding: 80rpx 60rpx 60rpx 60rpx;
        color: #fff;
        line-height: 2.5;
        view:nth-child(1) {
            font-size: 60rpx;
        }
        view:nth-child(2) {
            font-size: 30rpx;
        }
    }

    .form-btn {
        width: 468rpx;
        height: 90rpx;
        background: #70a2a4;
        border-radius: 10rpx;
        color: #ffffff;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        line-height: 90rpx;
        text-align: center;
        margin: 48rpx auto 0;
    }
    .bg-box {
        width: 100%;
        height: 20vh;
        // background: url(/static/login/login-Background.png) no-repeat center;
        padding-top: 88rpx;
        background-size: 100% 100%;

        .bg-box-head {
            width: 100%;
            font-size: 34rpx;
            font-weight: normal;
            line-height: 88rpx;
            text-align: center;
            color: #ffffff;
            height: 88rpx;
        }

        .bg-box-title {
            text-align: center;
            display: flex;
            justify-content: center;
            margin-top: 17.5vh;

            image {
                width: 260rpx;
            }
        }
    }
}

.big-box > image {
    width: 100%;
    height: 360rpx;
    position: absolute;
    top: 0;
    left: 0;
}

.big-box > image.fanhuis {
    position: absolute;
    top: 100rpx;
    left: 40rpx;
    width: 48rpx;
    height: 48rpx;
    z-index: 88;
}

.big-box h3 {
    font-size: 64rpx;
    /* color: #494955; */
    color: #fff;
    font-weight: bold;
    line-height: 90rpx;
    text-align: center;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 20rpx;
    width: 100%;
    margin: 0 auto;
}

.logink-box {
    // position: absolute;
    width: 100%;
    // padding: 60rpx;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
    border-radius: 50rpx;
    position: absolute;
    top: 25vh;
    height: calc(75vh - 100rpx);
    padding: 70rpx;
    .login-title {
        font-family: PlayfairDisplay-Bold;
        font-size: 50rpx;
        font-weight: normal;
        color: #121515;
        // text-align: center;
        display: flex;
        margin-bottom: 1vh;
    }
    /deep/.u-line {
        display: none;
    }
    /deep/.u-form-item {
        // background-color: #f5f5f5;
        // margin-top: 40rpx;
        // border-radius: 10px;
        // padding: 0 20px;
    }
    /deep/.u-form-item__body {
        background-color: #f5f5f5;
        margin-top: 40rpx;
        border-radius: 10rpx;
        padding: 20rpx;
    }
    /deep/.u-form-item__body__right__message {
        padding-top: 10rpx;
        margin-left: 0px !important;
        text-align: end;
    }
}

.label {
    font-family: Karla-Regular;
    font-size: 28rpx;
    font-weight: normal;
    color: #333;
}

.login-protocol {
    width: 100%;
    display: flex;
    align-items: center; // margin-top: 64rpx;
    justify-content: center;
    padding-top: 20rpx;
    .checked-box {
        width: 36rpx;
        height: 36rpx;
        background: #ffffff;
        border: 1px solid #70a2a4;
        border-radius: 50%;
        margin-right: 16rpx;
        view {
            width: 100%;
            height: 100%;
        }
        .selected {
            background: #75a2fd;
            border-radius: 50%;
        }
    }
    view {
        font-size: 24rpx;
    }
}

.popup {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 9999;
    top: 0;

    .rect {
        // width: 100%;
        height: 60vh;
        overflow-y: auto;
        text-align: center;
        background: #ffffff;
        border-radius: 80rpx 80rpx 0 0;
        padding: 40rpx;
        bottom: 0;
        position: absolute;
    }

    .close {
        margin: 0 auto;
        text-align: center;
        height: 100rpx;
        width: 80%;
        border-radius: 50rpx;
        background: #00a5b8;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 100rpx;
        text-align: center;
    }
}
.changeTipBox {
    margin-top: 20rpx;
    color: #2e86f1;
    font-size: 26rpx;
    text-align: end;
    margin-top: 5vh;
}

.buttons {
    margin: 50rpx auto 0;
    width: 70vw;
    height: 90rpx;
    background: #2e86f1;
    border-radius: 8rpx;
    text-align: center;
    font-size: 32rpx;
    // font-weight: 600;
    color: #ffffff;
    line-height: 90rpx;
    margin-top: 150rpx;
    margin-bottom: 150rpx;
}
.codeText {
    color: #70a2a4;
    font-size: 28rpx;
}
</style>